<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- 主侧边栏容器 -->
<aside th:fragment="sidebar(menuTree)" class="main-sidebar sidebar-dark-purple elevation-4">
  <!-- Brand Logo -->
  <a href="#" class="brand-link">
    <img th:src="@{/static/lib/adminlte/img/AdminLTELogo.png}" alt="Logo"
         class="brand-image img-circle elevation-3" style="opacity: .8">
    <span class="brand-text font-weight-light">冠之杰基础监控</span>
  </a>

  <!-- 侧边栏 开始 -->
  <div class="sidebar">
    <!-- 侧边栏用户面板 (可选) -->
    <div class="user-panel mt-3 pb-3 mb-3 d-flex">
      <div class="image">
        <img th:src="@{/static/lib/adminlte/img/user4-128x128.jpg}"
             class="img-circle elevation-2" alt="User Image">
      </div>
      <div class="info">
        <div class="d-block">当前登录用户</div>
        <div class="d-block">root</div>
      </div>
    </div>

    <!-- 侧边栏菜单 开始 -->
    <nav class="mt-2">
      <ul th:include="this::menu" class="nav nav-pills nav-sidebar nav-child-indent flex-column"
          data-widget="treeview"
          role="menu"
          data-accordion="true"></ul>
    </nav>
    <!-- 导航菜单 结束 -->
  </div>
  <!-- 侧边栏 结束 -->
</aside>

<th:block th:fragment="menu">
  <!-- 添加类名nav-icon然后引入font-awesome等图标库即可添加图标链接 -->
  <li class="nav-item has-treeview sidebar-menu ">
    <a href="#home" class="nav-link">
      <i class="fas fa-home nav-icon"></i>
      <p>
        <block>首页</block>
      </p>
    </a>
  </li>
  <li class="nav-item has-treeview sidebar-menu ">
    <a class="nav-link">
      <i class="fas fa-share-alt nav-icon"></i>
      <p>
        <block>配置中心</block>
        <i class="fas fa-angle-right right"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      <li class="nav-item has-treeview sidebar-menu ">
        <a href="#params" class="nav-link">
          <i class="fas fa-code nav-icon"></i>
          <p>
            <block>参数管理</block>
          </p>
        </a>
      </li>
      <li class="nav-item has-treeview sidebar-menu ">
        <a href="#gateways" class="nav-link">
          <i class="fas fa-compass nav-icon"></i>
          <p>
            <block>网关管理</block>
          </p>
        </a>
      </li>
      <li class="nav-item has-treeview sidebar-menu ">
        <a href="#indicators" class="nav-link">
          <i class="fas fa-box nav-icon"></i>
          <p>
            <block>指标管理</block>
          </p>
        </a>
      </li>
      <li class="nav-item has-treeview sidebar-menu ">
        <a href="#servers" class="nav-link">
          <i class="fas fa-server nav-icon"></i>
          <p>
            <block>服务器设置</block>
          </p>
        </a>
      </li>
    </ul>
  </li>
  <li class="nav-item has-treeview sidebar-menu ">
    <a class="nav-link">
      <i class="fas fa-cloud nav-icon"></i>
      <p>
        <block>连接管理</block>
        <i class="fas fa-angle-right right"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      <li class="nav-item has-treeview sidebar-menu ">
        <a href="#channels" class="nav-link">
          <i class="fas fa-server nav-icon"></i>
          <p>
            <block>连接列表</block>
          </p>
        </a>
      </li>
      <li class="nav-item has-treeview sidebar-menu ">
        <a href="#blacks" class="nav-link">
          <i class="fas fa-ban nav-icon"></i>
          <p>
            <block>黑名单</block>
          </p>
        </a>
      </li>
      <li class="nav-item has-treeview sidebar-menu ">
        <a href="#collects" class="nav-link">
          <i class="fas fa-star-of-life nav-icon"></i>
          <p>
            <block>最新数据</block>
          </p>
        </a>
      </li>
    </ul>
  </li>
  <li class="nav-item has-treeview sidebar-menu ">
    <a class="nav-link">
      <i class="fas fa-sitemap nav-icon"></i>
      <p>
        <block>系统管理</block>
        <i class="fas fa-angle-right right"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      <li class="nav-item has-treeview sidebar-menu ">
        <a href="#users" class="nav-link">
          <i class="fas fa-user nav-icon"></i>
          <p>
            <block>用户列表</block>
          </p>
        </a>
      </li>
    </ul>
  </li>
</th:block>
